<template>
  <div class="page-container">
    <h2>抽奖记录</h2>
    <a-input-number
      v-model:value="recordRound"
      placeholder="轮次"
      style="width: 150px; margin-right: 10px"
    />
    <a-button type="primary" @click="fetchData">查询</a-button>
    <a-table
      :columns="recordColumns"
      :data-source="drawRecords"
      style="margin-top: 20px"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'user_name'">
          {{ record.user?.nickname || "未知用户" }}
        </template>
        <template v-if="column.key === 'prize_name'">
          {{ record.prize?.name || "-" }}
        </template>
      </template>
    </a-table>
    <a-pagination
      v-model:current="pagination.current"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      style="margin-top: 20px"
      @change="fetchData"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { drawApi } from "../../api";

const recordRound = ref(null);
const drawRecords = ref([]);

const recordColumns = [
  { title: "ID", dataIndex: "id", key: "id" },
  { title: "用户", dataIndex: "user_name", key: "user_name" },
  { title: "奖品", dataIndex: "prize_name", key: "prize_name" },
  { title: "轮次", dataIndex: "round", key: "round" },
  { title: "抽奖时间", dataIndex: "draw_time", key: "draw_time" },
];

// 获取抽奖记录
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
});
const fetchData = async () => {
  try {
    const result = await drawApi.getRecords({
      page: pagination.current,
      pagesize: pagination.pageSize,
    });
    drawRecords.value = result.data.list || [];
    pagination.total = result.data.total || 0;
  } catch (error) {
    console.error("获取抽奖记录失败:", error);
  }
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.page-container {
  min-height: 600px;
}
</style>
